import React from 'react'
// Spin是正在加载的组件
import { Spin } from 'antd'
// useSelector 类似于mapStateToProps,用于过滤数据
// useDispatch 返回store的dispatch方法
import { useSelector, useDispatch } from 'react-redux'
// 引入对应的actionCreator
import { add, sub, asyncCount } from './store'
export default function Count() {
  // 这个dispatch就是store.dispatch
  const dispatch = useDispatch()
  const data = useSelector((state) => {
    // state就是redux中的数据
    console.log(state)
    // 这个回调中必须写return,retur什么,useSelector的返回值就是什么.目的就是为了过滤数据
    // 红色波浪线是ts检查问题,暂时不用管.最后会处理
    return state.test
  })
  return (
    <div>
      <p>{data.count}</p>
      <Spin spinning={data.loading}></Spin>
      <br />
      <button
        onClick={() => {
          dispatch(add(undefined))
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          dispatch(sub(2))
        }}
      >
        -
      </button>
      <button
        onClick={() => {
          dispatch(asyncCount())
        }}
      >
        异步的加
      </button>
    </div>
  )
}
